<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的客户</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>

</head>
<body>
<div id="app">
    <div rel="value">
        <span>选择地区：</span>
        <template>
            <el-select v-model="value.pro"  placeholder="请选择" @change="selectCity">
                <el-option
                        v-for="(pro,index) in provinces"
                        :key="index"
                        :label="pro"
                        :value="pro">
                </el-option>
            </el-select>

            <el-select v-model="value.city" style="margin-left: 20px;" placeholder="请选择市" @change="selectArea">
                <el-option
                        v-for="(city,index) in typeCitys"
                        :key="index"
                        :label="city"
                        :value="city">
                </el-option>
            </el-select>

            <el-select v-model="value.area" style="margin-left: 20px;" placeholder="请选择市">
                <el-option
                        v-for="(area,index) in typeAreas"
                        :key="index"
                        :label="area"
                        :value="area">
                </el-option>
            </el-select>
        </template>
        <span>企业名称</span>
        <el-input v-model="input" placeholder="请输入内容" style="width: 100px"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="selectLike()">搜索</el-button>
    </div>
    <el-button @click="selectCom">企业查询</el-button>
    <el-button @click="dialogFormVisible=true">企业添加</el-button>
    <el-dialog title="企业信息" :visible.sync="dialogFormVisible" @close="closeDialog">
        <el-form :model="company">
            <el-form-item label="公司名称">
                <el-input v-model="company.companyName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司负责人">
                <el-input v-model="company.legal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司电话">
                <el-input v-model="company.fixedTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司地址（省）">
                <el-input v-model="company.companyProvince" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司地址（市）">
                <el-input v-model="company.companyCity" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司地址（县）">
                <el-input v-model="company.companyArea" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司地址（详细）">
                <el-input v-model="company.companyAddress" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司邮箱">
                <el-input v-model="company.companyEmail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司类型">
                <el-input v-model="company.companyType" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司经营范围">
                <el-input v-model="company.businessScope" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司品牌">
                <el-input v-model="company.companyBrand" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司规模">
                <el-input v-model="company.companyScale" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司经纬度">
                <el-input v-model="company.longitudeLatitude" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司简介">
                <el-input v-model="company.companyIntroduction" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司微信">
                <el-input v-model="company.companyWechat" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司固定电话">
                <el-input v-model="company.legalTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司成立时间">
                <el-date-picker
                        v-model="company.creatTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveCompany">确 定</el-button>
        </div>
    </el-dialog>
    <h3> 我的客户表</h3>
    <el-table
            ref="customerTable"
            :data="customers"
            style="width: 100%">
        <el-table-column
                width="55">
        </el-table-column>
        <el-table-column
                label="公司编号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司名称">
            <template slot-scope="scope">
                <span style="margin-left: 10px;cursor: pointer" >{{ scope.row.name }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司负地址">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.address }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司电话">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司邮箱">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.email }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司经营范围">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.business }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                       >合同
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        >管理
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="size"
            :current-page="current"
            @current-change="loadCustomer">
    </el-pagination>
    <h3> 企业表</h3>
    <el-table
            ref="companyTable"
            :data="companys"
            style="width: 100%">
        <el-table-column
                width="55">
        </el-table-column>
        <el-table-column
                label="公司编号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.companyId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司名称">
            <template slot-scope="scope">
                <span style="margin-left: 10px;cursor: pointer" >{{ scope.row.companyName }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司负地址">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.companyProvince+scope.row.companyCity+scope.row.companyArea }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司电话">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.fixedTel }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司邮箱">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.companyEmail }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司经营范围">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.businessScope }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司类型">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.companyType }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司简介">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.companyIntroduction }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="cooper(scope.$index, scope.row)"
                >申请合作
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="stotal"
            :page-size="ssize"
            :current-page="scurrent"
            @current-change="loadCustomer">
    </el-pagination>
</div>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    customers:[],
                    companys:[],
                    company: {companyName:'',companyName:'', legal:'', fixedTel:'', companyProvince:'', companyCity:'',companyArea:'', companyAddress:'', companyEmail:'', businessScope:'', companyBrand:'', companyType:'', companyScale:'', longitudeLatitude:'', companyIntroduction:'', companyWechat:'', legalTel:'', creatTime:'', companyStatus:''},
                    supplier:[],
                    total:0,
                    current:1,
                    size:10,
                    stotal:0,
                    scurrent:1,
                    ssize:10,
                    dialogFormVisible:false,
                    provinces:["湖北省","湖南省","广东省","河南省","河北省","陕西省","广西省"],//省
                    city:{
                        "湖北省":["武汉市","襄阳市","宜昌市","荆州市","恩施市"],
                        "湖南省":["长沙市","株洲市","湘潭市","衡阳市","邵阳市"],
                        "广东省":["广东市","深圳市","珠海市","中山市","佛山市"],
                        "河南省":["郑州市","开封市","洛阳市","南阳市","许昌市"],
                        "陕西省":["西安市","铜川市","宝鸡市","咸阳市","汉中市"],
                        "广西省":["南宁市","柳州市","桂林市","北海市","梧州市"]
                    },//市
                    area:{
                        "武汉市":["洪山区","东湖区","花山区","青山区"],
                        "长沙市":["长沙县","善华县","湘潭县","湘阴县"],
                        "襄阳市":["襄城区","樊城区","襄州区","保康县"],
                        "株洲市":["茶陵县","炎陵县","芦淞县"],
                        "广东市":["黄埔区","花都区","天河区"],
                        "郑州市":["中原区","二七区","上街区"],
                        "西安市":["莲湖区","雁塔区","未央区"],
                        "南宁市":["江南区","青秀区","兴宁区"]
                    },//区
                    typeCitys:[],//选择的省下的市
                    typeAreas:[],//选择的市下的县
                    value:{
                        pro:'',
                        city:'',
                        area:''
                    },
                    input:'',
                }
            },
            methods:{
                //得到登录对象所有客户信息
                loadCustomer(current){
                    let size=this.size
                    axios.get("/customers/"+current+"/"+size).then(res=>{
                        this.customers = res.data.records;
                        this.total = res.data.total;
                        this.current = res.data.current;
                    })
                },
                //二级菜单
                selectCity(){
                    this.value.city='';
                    for( const k in this.provinces){
                        if(this.value.pro===this.provinces[k]){
                            this.typeCitys=this.city[this.value.pro]
                        }
                    }
                },
                //三级菜单
                selectArea(){
                    this.value.area='';
                    for(const k in this.typeCitys){
                        if(this.value.city===this.typeCitys[k]){
                            this.typeAreas=this.area[this.value.city];
                        }
                    }
                },
                //查询方法
                selectLike(){
                    let add =this.value.pro+this.value.city+this.value.area
                    if(add==''){
                        this.$message("地址不能为空")
                    }
                    let name =this.input
                    if(name==''){
                        this.$message("公司名称不能为空")
                    }
                    axios.get("/customers/1/10/"+add+"/"+name).then(res=>{
                        this.customers = res.data.records;
                        this.total = res.data.total;
                        this.current = res.data.current;
                    })
                },
                //公司查询
                selectCom(){
                    if(this.value.pro==''||this.value.city==''||this.value.area==''){
                        this.$message("地址不能为空")
                    }
                    let pro =this.value.pro
                    let city =this.value.city
                    let area=this.value.area
                    let name =this.input
                    if(name==''){
                        this.$message("公司名称不能为空")
                    }
                    axios.get("/company/1/10/"+pro+"/"+city+"/"+area+"/"+name).then(res=>{
                        this.companys = res.data.records;
                        this.stotal = res.data.total;
                        this.scurrent = res.data.current;
                    })
                },
                //表单closeDialog
                closeDialog(){
                    this.supplier=[]
                    this.dialogFormVisible=false
                },
                //手动添加公司
                saveCompany() {
                    let company = JSON.parse(JSON.stringify(this.company));
                   console.log(company)
                    axios.post("/company",company).then(res=>{
                        if(res.data=="ok"){
                            this.dialogFormVisible=false
                            this.loadCompany()
                            this.$message("添加成功！")
                        }
                    })
                },
                //查询所有公司
                loadCompany(current){
                    axios.get("/company/"+current+"/10").then(res=>{
                        this.companys = res.data.records;
                        this.stotal = res.data.total;
                        this.scurrent = res.data.current;
                    })
                },
                //申请合作
                cooper(index,row){
                    let sid = row.companyId
                    axios.post("/par/"+sid).then(res=>{
                        if(res.data==="ok"){
                            this.$message("申请消息发送成功！")
                        }else {
                            this.$message("已存在合作关系")
                        }
                    })
                }

            },
            mounted(){
                this.loadCustomer(1);
                this.loadCompany(1);
            }
        })
    </script>
</body>
</html>